<template>
  <div class="SwitchVersion-container">
    <base-modal
      title="模型版本"
      :width="560"
      cancelText="取消"
      okText="切换"
      v-on="$listeners"
      @ok="handleOk"
    >
      <div class="SwitchVersion-form-box">
        <div class="form-header">
          <div class="form-item">
            <div class="item-name">模型名称</div>
            <div class="item-value">当前版本</div>
          </div>
        </div>
        <div class="form-body">
          <div class="form-item">
            <div class="item-name">{{modelName}}</div>
            <div class="item-value">
              <a-select v-model="dataInfo.version">
                <a-select-option
                  v-for="item in versionList"
                  :key="item.version"
                >{{'v.' + item.version}}</a-select-option>
              </a-select>
            </div>
          </div>
        </div>
      </div>
    </base-modal>
  </div>
</template>

<script>
import BaseModal from "@/components/BaseModal";
import { getHistory } from "@/api/bimIntegrate";
export default {
  components: {
    BaseModal,
  },
  props: {
    modelId: {
      type: String,
      default: ''
    },
    // 当前模型版本
    modelVersion: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      modelName: '',
      versionList: [],
      dataInfo: {
        name: "",
        version: "",
      },
    };
  },
  created() {
    this.initPage();
    this.getHistory();
  },
  methods: {
    initPage() {
        this.dataInfo = {
          modelId: this.modelId,
          version: this.modelVersion,
        };
    },
    async getHistory() {
      const params = {
        modelId: this.dataInfo.modelId
      };
      const [err, res] = await getHistory(params);
      if (!err) {
        this.versionList = res.data.histories || [];
        this.modelName = res.data.name || ''
      }
    },
    handleOk() {
      this.$emit("switch:version", this.dataInfo);
    },
  },
};
</script>

<style lang="less">
.SwitchVersion-container {
  /deep/.ant-modal-body {
    padding: 0;
  }
  .form-box {
    .form-header {
      background-color: rgba(245, 245, 245, 1);
      padding: 0 16px;
      line-height: 36px;
    }
    .form-body {
      padding: 16px;
    }
    .form-item {
      display: flex;
      justify-content: space-between;
      word-break: break-all;
      .item-name {
        flex: 1;
        margin-right: 10px;
      }
      .item-value {
        width: 100px;
        text-align: left;
      }
      .ant-select {
        width: 100%;
      }
    }
  }
}
.SwitchVersion-form-box {
  .form-header {
    background-color: rgba(245, 245, 245, 1);
    padding: 0 16px;
    line-height: 36px;
  }
  .form-body {
    padding: 16px;
  }
  .form-item {
    display: flex;
    justify-content: space-between;
    word-break: break-all;
    .item-name {
      flex: 1;
      margin-right: 10px;
    }
    .item-value {
      width: 200px;
      text-align: left;
    }
    .ant-select {
      width: 100%;
    }
  }
}
</style>